<template>
  <div class="recommends">
    <div class="app">
      <img class="top" src="../assets/1@3x.png" />
      <font id="juzaotop">聚造商城</font>
      <div class="search">
        <img id="sousuo" src="../assets/2@3x.png" />
        <font class="gjz">搜索关键字</font>
      </div>
      <div></div>
    </div>
    <div></div>
    <div @click="refresh">重新加载数据</div>
    <div v-for="recommend in recommends" :key="recommend.id">
      <img :src="recommend.img" />
      <div>{{ recommend.title }}</div>
    </div>
    <div
      v-if="recommends.length < getRecommendsTotal"
      @click="getRecommends(1)"
    >
      点击加载更多
    </div>
    <div v-else>已经到底了哦</div>
    <!-- {{ getRecommendsTotal }} -->
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "login",
  components: {},
  data() {
    return {
      recommends: [],
      baseURL: api.baseURL,
      getRecommendsTotal: 0,
      params: {
        pageNum: 1,
      },
    };
  },
  methods: {
    getRecommends(addNum) {
      this.params.pageNum += addNum;
      this.$http({
        url: "/index/recommends",
        params: this.params,
      }).then((res) => {
        this.getRecommendsTotal = res.total;
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i];
          item.img = this.baseURL + item.img;
          this.recommends.push(item), console.log(item.img);
        }
      });
    },
    refresh() {
      this.params.pageNum = 1;
      this.recommends = [];
      this.getRecommendsTotal = 0;
      this.getRecommends(0);
    },
  },
  created() {},
  mounted() {
    this.getRecommends(0);
  },
};
</script>

<style scoped>
.recommends {
  padding: 0;
  margin: 0;
  width: 750px;
}
.app {
  width: 750px;
  margin: 0 auto;
}
.top {
  width: 750px;
}
#juzaotop {
  position: absolute;
  font-size: 36px;
  color: white;
  left: 42px;
  top: 108px;
}
.search {
  position: absolute;
  left: 216px;
  top: 98px;
  width: 318px;
  height: 68px;
  background-color: white;
  border-radius: 60px;
}
#sousuo {
  position: absolute;
  left: 32.7px;
  top: 20px;
  width: 29.42px;
  z-index: 9;
}
.gjz {
  position: absolute;
  left: 88.7px;
  top: 18px;
  font-size: 24px;
  color: rgba(181, 179, 176, 1);
}
</style>